<style lang="less">
span.iconfont {
    cursor: pointer;
}
span.iconfont:hover {
    color: #68ad30;
}
// .ivu-tree-children li:hover {
//     background-color: #8de0e6;
// }
.btn-group {
    .btn-tree {
        margin-right: 16px;
    }
}
.tree-name {
    display: inline-block;
    width: 400px;
}
</style>
<template>
    <div>
        <Card dis-hover>
            <div class="page-body">
                <Form
                    ref="queryForm"
                    :label-width="80"
                    label-position="left"
                    inline
                >
                    <Row :gutter="16">
                        <Col span="8">
                            <FormItem label="类别名称" style="width: 100%">
                                <Input
                                    v-model="requestParams.name"
                                    placeholder="请输入要查找的类别名称"
                                ></Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <Button
                                icon="ios-search"
                                type="primary"
                                size="small"
                                @click="getTreeData"
                                >{{ L("Find") }}</Button
                            >
                            <Button
                                @click="create(null)"
                                icon="md-add"
                                type="primary"
                                size="small"
                                class="toolbar-btn"
                                >{{ L("Add") }}</Button
                            >
                        </Col>
                    </Row>
                </Form>
                <Tree
                    :data="treeData"
                    :render="renderContent"
                    @on-toggle-expand="toggleExpand"
                    expand-node
                ></Tree>
                <Spin size="large" fix v-if="spinShow"></Spin>
            </div>
            <create-newsCategory
                v-model="createModalShow"
                :parent-id="selectId"
                @save-success="getTreeData"
            ></create-newsCategory>
            <edit-newsCategory
                v-model="editModalShow"
                :editNewsCategory="selectNewsCategory"
                @save-success="getTreeData"
            ></edit-newsCategory>
        </Card>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "@/lib/util";
import AbpBase from "@/lib/abpbase";
import Ajax from "@/lib/ajax";
import CreateNewsCategory from "./create-cate.vue";
import EditNewsCategory from "./edit-cate.vue";
import NewsCategory from "@/store/entities/articles/NewsCategory";
@Component({
    components: { CreateNewsCategory, EditNewsCategory },
})
export default class NewsCategorys extends AbpBase {
    treeData: Array<any> = new Array<any>();
    buttonProps = {
        type: "default",
        size: "small",
    };

    requestParams = { name: null };

    createModalShow: boolean = false;
    editModalShow: boolean = false;

    selectId: number | null = null;
    selectNewsCategory: NewsCategory = new NewsCategory();
    spinShow = false;

    // 展开的结点Id
    expandIds: Array<number> = [];
    async getTreeData() {
        this.spinShow = true;
        let rep = await Ajax.get("/api/services/app/NewsCategory/GetTreeData", {
            params: this.requestParams,
        });
        this.treeData = rep.data.result;
        this.setOpen(this.treeData);
        this.spinShow = false;
    }
    create(pid) {
        this.selectId = pid;
        this.createModalShow = true;
    }
    // 存储展开的节点
    toggleExpand(ele) {
        if (ele.expand) {
            this.expandIds.push(ele.id);
        } else {
            this.expandIds.splice(
                this.expandIds.findIndex((item) => (item as any).id === ele.id),
                1
            );
        }
    }
    edit(reg) {
        this.selectNewsCategory = Util.extend(true, {}, reg);
        this.editModalShow = true;
    }
    // 还原展开的节点
    setOpen(data: any) {
        if (data.length && data.length > 0) {
            for (let i = 0; i < data.length; i++) {
                const element = data[i];
                if (this.expandIds.includes(element.id) && element.layer < 3) {
                    element.expand = true;
                }
                if (element.children && element.children.length > 0) {
                    this.setOpen(element.children);
                }
            }
        }
    }
    async delete(pid) {
        await Ajax.delete("/api/services/app/NewsCategory/Delete?Id=" + pid);
    }
    async created() {
        this.$Message.config({
            top: 300,
        });
        this.getTreeData();
    }
    renderContent(h, { root, node, data }) {
        return h(
            "span",
            {
                style: {
                    display: "inline-block",
                    width: "100%",
                }
            },
            [
                h("span",{class:{"tree-name": true}}, data.name),
                h(
                    "span",
                    {
                        class: {
                            "btn-group": true,
                        },
                        style: {
                            display: "inline-block",
                            //float: "right",
                            marginLeft: "32px",
                        },
                    },
                    [
                        data.layer != 3 &&
                            h(
                                "span",
                                {
                                    class: {
                                        "btn-tree": true,
                                    },
                                    style: {
                                        marginRight: "16px",
                                    },
                                    on: {
                                        click: () => {
                                            this.create(data.id);
                                        },
                                    },
                                },
                                [
                                    h("i", {
                                        class: {
                                            iconfont: true,
                                        },
                                        domProps: {
                                            innerHTML: "&#xe63b;",
                                        },
                                    }),
                                    "添加子类",
                                ]
                            ),
                        h(
                            "span",
                            {
                                class: {
                                    "btn-tree": true,
                                },
                                on: {
                                    click: () => {
                                        this.edit(data);
                                    },
                                },
                            },
                            [
                                h("i", {
                                    class: {
                                        iconfont: true,
                                    },
                                    domProps: {
                                        innerHTML: "&#xe8ad;",
                                    },
                                }),
                                "修改",
                            ]
                        ),
                        data.id != 4 && h(
                            "span",
                            {
                                class: {
                                    "btn-tree": true,
                                },
                                on: {
                                    click: async () => {
                                        this.$Modal.confirm({
                                            title: this.L("Tips"),
                                            content: "你确定要删除该类别吗？",
                                            loading: true,
                                            okText: this.L("Yes"),
                                            cancelText: this.L("No"),
                                            onOk: async () => {
                                                await this.delete(data.id);
                                                this.$Modal.remove();
                                                await this.getTreeData();
                                            },
                                        });
                                    },
                                },
                            },
                            [
                                h("i", {
                                    class: {
                                        iconfont: true,
                                    },
                                    domProps: {
                                        innerHTML: "&#xe645;",
                                    },
                                }),
                                "删除",
                            ]
                        ),
                    ]
                ),
            ]
        );
    }
}
</script>